<?php

#################################################################
#								HTML
#################################################################

/**
 * Input field component registed as 'element/file'
 * 
 * $vars['name']
 * $vars['class']
 * $vars['width']
 * $vars['id']
 * $vars['image']
 * $vars['image_max_dim']
 * $vars['image_show_box']
 * $vars['extensions']
 * $vars['onChange']
 */

if($_CONTEXT=='HTML'){

	$_CSS_STACK->push(blg_get_site_url().'element/file.css', TRUE);
	$_JS_STACK->push(blg_get_site_url().'element/file.js', TRUE);

	//PREPARE DEFAULTS		
	if(empty($vars['id']))
		$vars['id']= 'input_file_'.random_string(12);
		
	if(empty($vars['image_max_dim']))
		$vars['image_max_dim']= 120;
		
	if(!is_bool($vars['image_show_box']))
		$vars['image_show_box']= TRUE;
			
	if(!empty($vars['image']) && is_string($vars['image']) && blg_file_exists($vars['image'])){ //If image exists...
		$class= 'blg_input_image';
	}
	else{
		$vars['image']= FALSE;
		$class= 'blg_input_file';
	}		
	
	//BUILD		
	$input= '<span id="span_'.$vars['id'].'"><input type="file"';
	
	if(!empty($vars['name']))
		$input.= ' name="'.$vars['name'].'"';
		
	if(!empty($vars['id']))
		$input.= ' id="'.$vars['id'].'" blg_id="'.$vars['id'].'"';		
		
	if(!empty($vars['class']))
		$input.= ' class="'.$class.' '.$vars['class'].'"';
	else
		$input.= ' class="'.$class.'"';
		
	if(!empty($vars['width'])){
		if(is_int($vars['width']))
			$input.= ' style="width:'.$vars['width'].'px;"';
		else
			$input.= ' style="width:'.$vars['width'].';"';
	}

	if(!empty($vars['image'])){
		//Mime-type for browsers		
		$input.= ' accept="image/*"';
				
	}
	
	if(!empty($vars['extensions'])){		
		$exts= explode(',', $vars['extensions']);
		$exts= array_map('trim', $exts);
		$exts= array_map('strtolower', $exts);
		$exts= array_filter($exts);
		
		$js_ext_array= "['".implode("','", $exts)."']";
		
		$txt_ext='';
		foreach($exts as $i => $ext)
			$txt_ext.= ($i>0?', ':'').'*.'.$ext;
	}	
	
	$input.= ' /></span>';
	
	$img= FALSE;
	if($vars['image']!==FALSE){	
		list($width,$height)= blg_image_dimension($vars['image']);
		list($width,$height)= blg_resize_size($width, $height, $vars['image_max_dim']);
		$img= '<img style="cursor: pointer; width:'.$width.'px; height:'.$height.'px;" id="img_'.$vars['id'].'" targetinput="'.$vars['id'].'" src="'.blg_get_files_url().$vars['image'].'">';

		if($vars['image_show_box']===FALSE){
			$code="
				$('#span_".$vars['id']."').css('position', 'absolute');
				$('#span_".$vars['id']."').css('left', '-999999px');
				$('#span_".$vars['id']."').css('top', '-999999px;');
			";
			
			$_JS_CODE->append($code, ON_DOC_READY);
		}
	}
	
	if($img){
		echo '
		<table class="table_input_image">
			<tr>
				<td>'.$img.'</td>
				<td>'.$input.'</td>
			</tr>
		</table>
		';
	}
	else{
		echo $input;
	}	
	
	if(!empty($vars['extensions'])){
		$code="
			$('#".$vars['id']."').bind('change', function(){
				if($(this).val().length>0 && !v_is_valid_extension($(this).val(), ".$js_ext_array.")){
					blg_error('".blg_echo('error:upload:invalid_extension', array($txt_ext))."');
					$('#span_".$vars['id']."').html($('#span_".$vars['id']."').html());
				}
			});
		";
		
		$_JS_CODE->append($code, ON_DOC_READY);		
	}
	
	if(!empty($vars['onChange'])){
		$code="
			$('#".$vars['id']."').bind('change', function(){
				".add_trainling_slash($vars['onChange'], ';')."
			});
		";
		
		$_JS_CODE->append($code, ON_DOC_READY);				
	}

}
#################################################################
#								JS
#################################################################
elseif($_CONTEXT=='JS'){ ?>

$(document).ready(function(){
	$('[targetinput]').bind('click', function(){
		$('#'+$(this).attr('targetinput')).click();
	});
});

<?php }
#################################################################
#								CSS
#################################################################
elseif($_CONTEXT=='CSS'){ ?>

input.blg_input_image{
	width: 200px;
}

table.table_input_image tr td{
	padding: 0 5px 0 0;
	vertical-align: middle;	
}

<?php }
